<template>
  <div class="user-activity">
    <!-- 发帖按钮 -->
    <el-button class="post-button" type="primary" @click="openPostDialog">发帖</el-button>

    <!-- 发帖对话框 -->
    <el-dialog :visible.sync="postDialogVisible" title="发帖">
      <el-form :model="newPost" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="newPost.username" />
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="newPost.content" type="textarea" />
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            class="upload-demo"
            list-type="picture-card"
            :file-list="newPost.images"
            :on-change="handleImageChange"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :limit="3"
            :on-exceed="handleExceed"
            :auto-upload="false"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="postDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitPost">发布</el-button>
      </span>
    </el-dialog>

    <!-- 展示帖子 -->
    <div v-for="post in posts" :key="post.id" class="post">
      <div class="user-block">
        <img class="img-circle" :src="post.avatar">
        <span class="username text-muted">{{ post.username }}</span>
        <span class="description">公开分享 - {{ post.time }}</span>
      </div>
      <p>{{ post.content }}</p>
      <div v-if="post.images.length" class="user-images">
        <el-carousel v-if="post.carousel" :interval="6000" type="card" height="220px">
          <el-carousel-item v-for="image in post.images" :key="image.uid">
            <img :src="image.url" class="image">
          </el-carousel-item>
        </el-carousel>
        <div v-else class="post-images">
          <img v-for="image in post.images" :key="image.uid" :src="image.url" class="post-image">
        </div>
      </div>
      <ul class="list-inline">
        <li>
          <span class="link-black text-sm">
            <i class="el-icon-share" /> Share
          </span>
        </li>
        <li>
          <span class="link-black text-sm">
            <svg-icon icon-class="like" /> Like
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      postDialogVisible: false,
      dialogVisible: false,
      dialogImageUrl: '',
      newPost: {
        username: '',
        content: '',
        images: []
      },
      posts: [
        {
          id: 1,
          username: '新浪热点',
          time: '7:30',
          avatar: 'https://tvax3.sinaimg.cn/crop.0.0.450.450.180/002wVUFrly8h8vgt7mcs2j60ci0ci0t002.jpg?KID=imgbed,tva&Expires=1714994500&ssig=6Tr%2F0AF%2FLM',
          content: '【#梅大高速救人的00后称将捐出慰问金#！曾把伤者拉上坡】据南方都市报：梅大高速茶阳路段发生塌方灾害后，“00后”小伙蔡炫达也加入了救人的队伍。5月5日，蔡炫达告诉南都记者，他收到了相关部门送来的慰问金，并计划将慰问金全部捐出。#梅大高速救人司机拟被认定见义勇为#',
          images: [],
          carousel: false
        },
        {
          id: 2,
          username: '人民日报',
          time: '昨天',
          avatar: 'https://tvax4.sinaimg.cn/crop.0.0.1018.1018.180/0033ImPzly8h8vgemh8kxj60sa0sadgw02.jpg?KID=imgbed,tva&Expires=1714994841&ssig=wozzUColca',
          content: '#习主席的欧洲之行#【习近平将同法国总统和欧盟委员会主席举行中法欧领导人三方会晤】当地时间5月6日上午，国家主席习近平将在爱丽舍宫应约同法国总统马克龙和欧盟委员会主席冯德莱恩举行中法欧领导人三方会晤。#2024年首访#',
          images: [],
          carousel: false
        },
        {
          id: 3,
          username: '123456',
          time: '2 天前',
          avatar: 'https://wpimg.wallstcn.com/fb57f689-e1ab-443c-af12-8d4066e202e2.jpg',
          content: '',
          images: [
            { uid: '1', url: 'https://wpimg.wallstcn.com/9679ffb0-9e0b-4451-9916-e21992218054.jpg' },
            { uid: '2', url: 'https://wpimg.wallstcn.com/bcce3734-0837-4b9f-9261-351ef384f75a.jpg' },
            { uid: '3', url: 'https://wpimg.wallstcn.com/d1d7b033-d75e-4cd6-ae39-fcd5f1c0a7c5.jpg' }
          ],
          carousel: true
        }
      ]
    }
  },
  methods: {
    openPostDialog() {
      this.newPost = { username: '', content: '', images: [] }
      this.postDialogVisible = true
    },
    submitPost() {
      if (this.newPost.username && this.newPost.content) {
        this.posts.unshift({
          id: this.posts.length + 1,
          username: this.newPost.username,
          time: new Date().toLocaleTimeString(),
          avatar: 'https://via.placeholder.com/40', // 默认头像，实际中应该使用用户的头像
          content: this.newPost.content,
          images: this.newPost.images,
          carousel: this.newPost.images.length > 1
        })
        this.postDialogVisible = false
      } else {
        this.$message.error('请填写完整内容')
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleExceed(files, fileList) {
      this.$message.warning(`只能上传 3 张图片，您选择了 ${files.length} 张文件`)
    },
    handleImageChange(file, fileList) {
      const reader = new FileReader()
      reader.onload = (e) => {
        file.url = e.target.result
        this.newPost.images = fileList.map(f => ({
          name: f.name,
          url: f.url,
          uid: f.uid
        }))
      }
      reader.readAsDataURL(file.raw)
    }
  }
}
</script>

<style scoped>
.user-activity {
  position: relative;

  .user-block {
    .username,
    .description {
      display: block;
      margin-left: 50px;
      padding: 2px 0;
    }

    .username {
      font-size: 16px;
      color: #000;
    }

    .img-circle {
      border-radius: 50%;
      width: 40px;
      height: 40px;
      float: left;
    }

    span {
      font-weight: 500;
      font-size: 12px;
    }
  }

  .post {
    font-size: 14px;
    border-bottom: 1px solid #d2d6de;
    margin-bottom: 15px;
    padding-bottom: 15px;
    color: #666;

    .post-images {
      margin-top: 10px;

      .post-image {
        width: 100px;
        height: 100px;
        margin-right: 10px;
      }
    }

    .user-images {
      margin-top: 10px;

      .image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;

    li {
      display: inline-block;
      padding-right: 5px;
      padding-left: 5px;
      font-size: 13px;
    }

    .link-black {
      &:hover,
      &:focus {
        color: #999;
      }
    }
  }

  .post-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
  }
}
</style>
